<template>
  <sec-dialog title="编辑角色" :visible.sync="editeVisible">
    <sec-form :model="rowData">
      <sec-form-item label="角色名称" :label-width="formLabelWidth">
        <sec-input v-model="rowData.roleName" autocomplete="off"></sec-input>
      </sec-form-item>
      <sec-form-item label="角色描述" :label-width="formLabelWidth">
        <sec-input v-model="rowData.roleDesc" autocomplete="off"></sec-input>
      </sec-form-item>
    </sec-form>
    <div slot="footer" class="dialog-footer">
      <sec-button @click="handleClose">取 消</sec-button>
      <sec-button type="primary" @click="handleConfirm">确 定</sec-button>
    </div>
  </sec-dialog>
</template>
<script>
import http from '@/utils/http'
export default {
  props: {
    editeVisible: {
      type: Boolean,
      required: true
    },
    rowData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      formLabelWidth: '120px'
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:editeVisible', false)
    },
    async handleConfirm() {
      try {
        const { roleName, roleDesc, roleId } = this.rowData
        const res = await http.roleUpdate({
          roleName,
          roleDesc,
          roleId
        })
        if (!res.success) return
        this.$emit('update:editeVisible', false)
        this.$emit('updateList')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
